import 'package:flutter/material.dart';
import 'package:flutter_ability/custom_ui.dart';

class CarouselPage extends StatefulWidget {
  const CarouselPage({Key? key}) : super(key: key);

  @override
  State<CarouselPage> createState() => _CarouselPageState();
}

class _CarouselPageState extends State<CarouselPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: YJAppBar(
        isScaffold: true,
        leadingType: YJAppBarType.back,
        title: TextView.text("轮播图"),
        backgroundColor: YJColors.WHITE,
      ),
      backgroundColor: YJColors.WHITE,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          textCarousel(),
          const SizedBox(height: 16),
          imageCarousel(),
        ],
      ),
    );
  }

  imageCarousel() {
    final Key carouselKey = UniqueKey();
    final List<Widget> itemList = [
      Container(
        color: YJColors.THEME_COLOR,
      ),
      Container(
        color: YJColors.SECONDARY,
      ),
      Container(
        color: YJColors.SUCCESS,
      ),
    ];
    late int changedIndex;
    final YJCarousel carousel = YJCarousel(
      key: carouselKey,
      height: YJSize.dp(88),
      items: itemList.map((text) => stateMarker(child: text)).toList(),
      onPageChanged: (index) {
        changedIndex = index;
        print('inr $index $changedIndex');
      },
      autoPlay: true,
      hasPagination: true,
      enlargeMainPage: true,
      viewportFraction: 1.0,
    );
    return carousel;
  }

  textCarousel() {
    final Key carouselKey = UniqueKey();
    final List<String> textList = <String>[
      'AAAAAAAAAAAAAAAAA',
      'BBBBBBBBBBBBBBBBB',
      'CCCCCCCCCCCCCCCCC',
    ];
    final List<Widget> itemList = [
      TextView.text(textList[0], fontSize: 16),
      TextView.text(textList[1], fontSize: 16),
      TextView.text(textList[2], fontSize: 16)
    ];
    late int changedIndex;
    final YJCarousel carousel = YJCarousel(
      key: carouselKey,
      height: YJSize.dp(88),
      items: itemList.map((text) => stateMarker(child: text)).toList(),
      onPageChanged: (index) {
        changedIndex = index;
        print('inr $index $changedIndex');
      },
      autoPlay: true,
      viewportFraction: 1.0,
    );
    return carousel;
  }

  Widget stateMarker({Widget? child}) {
    return Container(
      color: YJColors.BACKGROUND_COLOR,
      alignment: Alignment.center,
      child: child ?? const SizedBox(),
    );
  }
}
